<template>
  <div class="box"
       @mouseover="scrollFocus"
       @mouseleave="scrollBlur">
    <div class="scroll"
         :class="{'animate':animate}"
         ref="scroll">
      <div class="message"
           v-for="(li,key) in list"
           :key="key"  @click.stop="goLink(li.formKey)">
        <div>{{li.content}}<div class="el-icon-message-solid ball"></div>
        </div>
        <div>
          <span>{{li.sendTime.slice(0,10)}}</span>
          <i class="el-icon-arrow-right"></i>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    messageData: {
      type: Array,
      default: () => []
    },
  },
  data () {
    return {
      animate: false,
      scroll: '',
      list: []
    }
  },
  created () {
  },
  watch: {
    messageData (val) {
      this.list = val.slice()
    }
  },
  methods: {
    scrollStart () {
      clearInterval(this.scroll)
      this.scroll = setInterval(() => {
        this.animate = true;
        setTimeout(() => {
          this.list.push(this.list[0])
          this.list.shift()
          this.animate = false
        }, 1500)
      }, 3000)
    },
    scrollFocus () {
      clearInterval(this.scroll)
    },
    scrollBlur () {
      this.scrollStart()
    },
    goLink(formKey){
      let src = formKey ;


      this.$router.push({
        path: src,
      })
    }
  },
  mounted () {
    this.scrollStart()
  },
  destroyed () {
    clearInterval(this.scroll)
  },

}
</script>
<style lang="scss" scoped>
.animate {
  transition: 1.5s;
  margin-top: -36px;
}
.box {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.message {
  height: 50%;
  width: 100%;
  display: flex;
  justify-content: space-between;
  position: relative;
  padding-left: 40px;
  box-sizing: border-box;
  transition: 3s;
}
.ball {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}
span {
  padding-right: 16px;
}
i {
  color: #409eff;
}
</style>
